<template>
	<!-- 运费模板管理 -->
	<div id="tops">
		<div class="Box">
			<el-header class="Header">
				<div class="filter-container">
					<div style="padding-top: 25px;">
						<el-button type="primary" @click="upad()" icon="el-icon-edit" v-insert="['operation:freight:create']">添加</el-button>
					</div>
					<!-- 创建弹窗 -->
					<el-dialog :title="title" :visible.sync="dialogFormVisible" v-if="dialogFormVisible" fullscreen>
						<el-form :model="form" :rules="rules" status-icon ref="form">

							<el-form-item label="模板名称" :label-width="formLabelWidth" prop="templateName" :rules="[{ required: true, message: '模板名称不能为空', trigger: 'blur', }]">
								<el-input v-model="form.templateName  " autocomplete="off"></el-input>
							</el-form-item>

							<el-form-item label="发货地址" :label-width="formLabelWidth" prop="spuLocation">
								<el-input v-model="form.spuLocation" autocomplete="off"></el-input>
							</el-form-item>

							<el-form-item label="发货期限" :label-width="formLabelWidth" prop="deliveryDeadline">
								<el-input v-model="form.deliveryDeadline " autocomplete="off">
									<template slot="append">天</template>
								</el-input>
							</el-form-item>

							<el-form-item label="有效期" :label-width="formLabelWidth">
								<el-radio-group v-model="radio1">
									<el-radio :label="-1">坚决不包邮</el-radio>
									<el-radio :label="0">卖家承担包邮</el-radio>
									<el-radio :label="1">设定满额包邮</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="默认包邮额度" v-if="radio1 == 1 ? true : false" :label-width="formLabelWidth" prop="defaultFreePrice">
								<el-input v-model="form.defaultFreePrice " autocomplete="off">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费首次数量" v-show="radio1 == 0 ? false : true" :label-width="formLabelWidth" prop="defaultFirstNum">
								<el-input v-model="form.defaultFirstNum " autocomplete="off">
									<template slot="append">
										<el-button>件</el-button>
										<el-tooltip class="item" effect="dark" content="当用户购买商品数量小于 ‘这个数’ 就支付默认首次发货价格的运费" placement="top">
											<i class="el-tooltip el-icon-question item"></i>
										</el-tooltip>
									</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费首次价格" v-show="radio1 == 0 ? false : true" :label-width="formLabelWidth" prop="defaultFirstPrice">
								<el-input v-model="form.defaultFirstPrice" autocomplete="off">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费续件数量" v-show="radio1 == 0 ? false : true" :label-width="formLabelWidth" prop="defaultContinueNum">
								<el-input v-model="form.defaultContinueNum" autocomplete="off">
									<template slot="append">
										<el-button>件</el-button>
										<el-tooltip class="item" effect="dark" content="当用户购买数量高于 ‘首次发货数量’ 每多 N 件，就须额外支付 ‘续件价格’" placement="top">
											<i class="el-tooltip el-icon-question item"></i>
										</el-tooltip>
									</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费续件价格" v-show="radio1 == 0 ? false : true" :label-width="formLabelWidth" prop="defaultContinuePrice">
								<el-input v-model="form.defaultContinuePrice " autocomplete="off">
									<template slot="append">
										<el-button>件</el-button>
										<el-tooltip class="item" effect="dark" content="若不需要计件额外算运费，则直接填0即可" placement="top-start">
											<i class="el-tooltip el-icon-question item"></i>
										</el-tooltip>
									</template>
								</el-input>
							</el-form-item>

							<el-form-item label="指定地区价格" :label-width="formLabelWidth" width='900'>
								<el-button type="primary" plain @click="addr()">添加</el-button>
								<el-table :data="freightTemplateCarriageDOList" style="width: 100%">
									<el-table-column prop="" label="指定地区ID" align="center" v-if="title !='创建'"> </el-table-column>
									<el-table-column prop="designatedArea" label="指定省份" align="center"> </el-table-column>
									<el-table-column prop="firstNum" label="首次数量" align="center"> </el-table-column>
									<el-table-column prop="firstMoney" label="首次价格" align="center"> </el-table-column>
									<el-table-column prop="continueNum" label="续件数量" align="center"> </el-table-column>
									<el-table-column prop="continueMoney" label="续件价格" align="center"> </el-table-column>
									<!--100-->
									<el-table-column prop="freePrice" label="满额包邮门槛" align="center"> </el-table-column>
									<!--100-->
									<el-table-column label="操作">
										<template slot-scope="scope">
											<el-button type="danger" @click="handleDelete(scope.$index)" size="small">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
						</el-form>
						<div slot="footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="demil('form')">确 定</el-button>
						</div>
					</el-dialog>
					<!-- 添加指定地区 -->
					<el-dialog title="添加指定地区" :visible.sync="dialogForm" v-if="dialogForm">
						<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm">
							<el-form-item label="包邮门栏" :label-width="formLabelWidth" prop="freePrice">
								<el-input v-model="ruleForm.freePrice " autocomplete="off">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费首次数量" :label-width="formLabelWidth" prop="firstNum">
								<el-input v-model="ruleForm.firstNum " autocomplete="off">
									<template slot="append"> 件 </template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费首次价格" :label-width="formLabelWidth" prop="firstMoney">
								<el-input v-model="ruleForm.firstMoney" autocomplete="off">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费续件数量" :label-width="formLabelWidth" prop="continueNum">
								<el-input v-model="ruleForm.continueNum" autocomplete="off">
									<template slot="append"> 件 </template>
								</el-input>
							</el-form-item>

							<el-form-item label="计费续件价格" :label-width="formLabelWidth" prop="continueMoney">
								<el-input v-model="ruleForm.continueMoney " autocomplete="off">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>

							<el-form-item label="指定地区" :label-width="formLabelWidth" prop="designatedArea">
								<el-checkbox-group v-model="ruleForm.designatedArea">
									<el-checkbox v-for="item in designatedAreaList" :label="item" :key="item"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-form>
						<div slot="footer">
							<el-button @click="cancel">取 消</el-button>
							<el-button type="primary" @click="demild('ruleForm')">确 定</el-button>
						</div>
					</el-dialog>
				</div>
			</el-header>
			<el-main class="Main">
				<el-table :data="tableData" border style="width: 100%" v-loading="loading" element-loading-text="正在查询中。。。">
					<el-table-column prop="freightTemplateDO.id" label="模板编号" align="center">
					</el-table-column>
					<el-table-column prop="freightTemplateDO.templateName" label="模板名称" align="center" width="300">
					</el-table-column>
					<el-table-column prop="" label="宝贝地址" align="center">
					</el-table-column>
					<el-table-column prop="freightTemplateDO.deliveryDeadline" label="发货期限" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.deliveryDeadline}}天
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.defaultFreePrice" label="默认包邮门栏" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.defaultFreePrice == 0 ? '包邮': scope.row.freightTemplateDO.defaultFreePrice == -1 ||  scope.row.freightTemplateDO.defaultFreePrice == -100? '不包邮' : '满'+(scope.row.freightTemplateDO.defaultFreePrice/100)+'元包邮'}}
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.defaultFirstNum" label="默认计费首次发货数量" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.defaultFirstNum}}件
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.defaultFirstMoney" label="默认计费首次发货价格" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.defaultFirstMoney/100}}元
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.defaultContinueNum" label="默认计费续件数量" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.defaultContinueNum}}件
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.defaultContinueMoney" label="默认计费续件价格" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateDO.defaultContinueMoney/100}}元
						</template>
					</el-table-column>
					<el-table-column prop="freightTemplateDO.reactiveGetter" label="指定地区数量" align="center">
						<template slot-scope="scope">
							{{scope.row.freightTemplateCarriageDOList.length}}
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template slot-scope="scope">
							<el-button type="primary" @click="upad(scope.$index,scope.row)" size="small" v-insert="['operation:freight:update']">修改</el-button>
							<el-button type="danger" @click="del(scope.row)" size="small" v-insert="['operation:freight:delete']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<!-- <el-container>
				<el-header class="buttom">

				</el-header>
			</el-container> -->

		</div>
	</div>

</template>

<script>
	import {
		Freighlist,
		Freighaddupdate,
		FreighSpous,
		FreighStatus,
		Freighdel
	} from '../../api/freightmanage.js'
	export default {
		data() {
			var deliveryDeadline = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('发货期限不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var defaultFreePrice = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('包邮门栏额度不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var defaultFirstNum = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('首次计费数量不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var defaultFirstPrice = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('首次计费价格不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var defaultContinueNum = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('计费续件数量不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var defaultContinuePrice = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('计费续件价格不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			// 指定地区
			var freePrice = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('包邮门栏额度不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var firstNum = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('首次计费数量不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var firstMoney = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('首次计费价格不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var continueNum = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('计费续件数量不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			var continueMoney = (rule, value, callback) => {
				const res = /^[0-9]*$/
				if (value === '') {
					callback(new Error('计费续件价格不能为空'))
				} else if (!res.test(value)) {
					callback(new Error('请输入整数!'))
				} else {
					callback()
				}
			}
			return {
				tableData: [],
				reactiveGetter: [],
				loading: true,
				radio1: '',
				input: '',
				count: 20,
				freightTemplateCarriageDOList: [],
				fullscreen: false,
				totalCount: 1,
				dialogFormVisible: false, // 添加修改
				dialogForm: false, // 添加指定地区
				title: '',
				pageNo: 1,
				formLabelWidth: '150px',
				// 添加指定地区
				designatedAreaList: ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省',
					'安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '海南省', '重庆市', '广西壮族自治区', '广东省', '四川省', '贵州省',
					'云南省', '西藏自治区', '宁夏回族自治区', '青海省', '甘肃省', '陕西省', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'
				],
				ruleForm: {
					designatedArea: [],
					freePrice: '',
					firstNum: '',
					firstMoney: '',
					continueNum: '',
					continueMoney: ''
				},
				form: {
					templateName: '', // 模板名称
					deliveryDeadline: '', // 发货期限
					defaultFreePrice: 68, // 默认包邮额度
					defaultFirstNum: 1, // 计费首次数量
					defaultFirstPrice: 0, // 计费首次价格
					defaultContinueNum: 1, // 计费续件数量
					defaultContinuePrice: 0, // 计费续件价格
					spuLocation: null, // 宝贝地址
					templateId: '' // id
				},
				rules: {
					deliveryDeadline: [{
						required: true,
						validator: deliveryDeadline,
						trigger: 'blur'
					}],
					defaultFreePrice: [{
						required: true,
						validator: defaultFreePrice,
						trigger: 'blur'
					}],
					defaultFirstNum: [{
						required: true,
						validator: defaultFirstNum,
						trigger: 'blur'
					}],
					defaultFirstPrice: [{
						required: true,
						validator: defaultFirstPrice,
						trigger: 'blur'
					}],
					defaultContinueNum: [{
						required: true,
						validator: defaultContinueNum,
						trigger: 'blur'
					}],
					defaultContinuePrice: [{
						required: true,
						validator: defaultContinuePrice,
						trigger: 'blur'
					}],

					freePrice: [{
						required: true,
						validator: freePrice,
						trigger: 'blur'
					}],
					firstNum: [{
						required: true,
						validator: firstNum,
						trigger: 'blur'
					}],
					firstMoney: [{
						required: true,
						validator: firstMoney,
						trigger: 'blur'
					}],
					continueNum: [{
						required: true,
						validator: continueNum,
						trigger: 'blur'
					}],
					continueMoney: [{
						required: true,
						validator: continueMoney,
						trigger: 'blur'
					}],
					designatedArea: [{
						required: true,
						message: '请至少选择一个区',
						trigger: 'change'
					}]
				},
				Updatedata() {}
			}
		},
		methods: {
			addr() {
				console.log(this.title)
				this.dialogForm = true
				this.ruleForm.designatedArea = []
				this.ruleForm.freePrice = ''
				this.ruleForm.firstNum = ''
				this.ruleForm.firstMoney = ''
				this.ruleForm.continueNum = ''
				this.ruleForm.continueMoney = ''
			},
			// 添加指定地区
			demild() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						var list = ''
						for (var i = 0; i < this.ruleForm.designatedArea.length; i++) {
							if (i == 0) {
								list += this.ruleForm.designatedArea[i]
							} else {
								list += ',' + this.ruleForm.designatedArea[i]
							}
						}
						var arr = {
							designatedAreaList: this.ruleForm.designatedArea,
							designatedArea: list,
							freePrice: this.ruleForm.freePrice,
							firstNum: this.ruleForm.firstNum,
							firstMoney: this.ruleForm.firstMoney,
							continueNum: this.ruleForm.continueNum,
							continueMoney: this.ruleForm.continueMoney
						}
						this.freightTemplateCarriageDOList.push(arr)
						this.dialogForm = false
					}
				})
			},
			// 删除增加的表格数据
			handleDelete(index) {
				this.freightTemplateCarriageDOList.splice(index, 1)
			},
			// 取消
			cancel() {
				this.dialogForm = false
				this.$refs.ruleForm.resetFields()
			},
			// 添加修改弹窗
			upad(index, row) {
				console.log(row)
				if (!row) {
					this.title = '创建'
					this.form.templateName = ''
					this.form.deliveryDeadline = ''
					this.form.defaultFreePrice = 68
					this.form.defaultFirstNum = 1
					this.form.defaultFirstPrice = 0
					this.form.defaultContinueNum = 1
					this.form.defaultContinuePrice = 0
					this.form.spuLocation = ''
					this.freightTemplateCarriageDOList = []
					this.form.templateId = ''
					this.radio1 = 1
				} else {
					this.title = '修改'
					this.form.templateName = row.freightTemplateDO.templateName
					this.form.deliveryDeadline = row.freightTemplateDO.deliveryDeadline
					this.form.defaultFreePrice = row.freightTemplateDO.defaultFreePrice / 100
					this.form.defaultFirstNum = row.freightTemplateDO.defaultFirstNum
					this.form.defaultFirstPrice = row.freightTemplateDO.defaultFirstMoney / 100 // 计费首次价格
					this.form.defaultContinueNum = row.freightTemplateDO.defaultContinueNum
					this.form.defaultContinuePrice = row.freightTemplateDO.defaultContinueMoney / 100 // 计费续件价格
					this.form.spuLocation = row.freightTemplateDO.spuLocation
					this.freightTemplateCarriageDOList = row.freightTemplateCarriageDOList
					this.form.templateId = row.freightTemplateDO.id
					if (row.freightTemplateDO.defaultFreePrice > 0) {
						this.radio1 = 1
					} else if (row.freightTemplateDO.defaultFreePrice == 0) {
						this.radio1 = 0
					} else {
						this.radio1 = -1
					}
				}
				this.fullscreen = true
				this.dialogFormVisible = true
			},
			demil(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const data = {
							_mt: this.title == '创建' ? 'addFreightTemplate' : 'updateFreightTemplate',
							templateName: this.form.templateName,
							deliveryDeadline: this.form.deliveryDeadline,
							defaultFreePrice: this.radio1 == 1 ? this.form.defaultFreePrice * 100 : this.radio1 == -1 ? -100 : 0,
							defaultFirstNum: this.form.defaultFirstNum,
							defaultFirstPrice: this.form.defaultFirstPrice * 100,
							defaultContinueNum: this.form.defaultContinueNum,
							defaultContinuePrice: this.form.defaultContinuePrice * 100,
							spuLocation: this.form.spuLocation,
							freightTemplateCarriageDOList: JSON.stringify(this.freightTemplateCarriageDOList),
							templateId: this.form.templateId,
							isFree: this.radio1
						}
						// console.log(this.radio1,"45")
						// console.log('data :>> ', data,"asddas")
						Freighaddupdate(data).then((res) => {
							console.log(res,"456456465")
							if (res.data.errmsg == '成功') {
								this.dialogFormVisible = false
								this.liste()
								this.$message({
									type: 'success',
									message: this.title == '修改' ? '修改运费模板成功' : '添加运费模板成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					}
				})
			},
			// 删除
			del(row) {
				console.log(row)
				this.$confirm(`此操作将永久删除该用户---'${row.freightTemplateDO.templateName}'---是否继续?', '提示`, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Freighdel(row.freightTemplateDO.id).then((res) => {
						console.log(res)
						if (res.data.errmsg == '成功') {
							this.liste()
							this.$message({
								type: 'success',
								message: '删除成功'
							})
						} else {
							this.$message.error({
								type: 'info',
								message: res.data.errmsg
							})
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			// 查询列表
			liste() {
				Freighlist().then((res) => {
					console.log(res, '查询列表')
					if (res.data.errmsg == '成功') {
						this.loading = false
						this.tableData = res.data.data
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			}
		},
		mounted() {
			this.liste()
		}

	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
	}

	.Box {
		width: 100%;
		overflow: hidden;
	}

	// 表头
	.Header {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 90px !important;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		// height: 800px;
		overflow-x: auto;
	}

	// 底部
	// .buttom {
	// 	background-color: #B3C0D1;
	// 	color: #333;
	// 	// text-align: center;
	// 	width: 100%;
	// 	height: 130px !important;
	// }

	img {
		width: 50px !important;
	}

	.el-table {
		font-size: 12px;
	}

	.filter-container {
		width: 100%;
		height: 54px;
	}

	.filter-item {
		width: 200px;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
	}

	::v-deep .filter-container :nth-child(3) .el-dialog {
		width: 70% !important;
	}

	// .el-scrollbar {
	// 	height: 568px !important;
	// }

	::v-deep .el-form-item__label {
		text-align: left !important;
	}

	::v-deep .el-form-item__content {
		width: 900px;
	}

	.el-checkbox-group {
		width: 518px;
	}

	.el-form .el-input {
		width: 550px !important;
	}

	.el-form {
		width: 90%;
		margin: auto;
	}
</style>
